<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NutritionCycle - David Bardwell homework 3</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" 
                rel="stylesheet" />
        <script type="text/javascript" 
                src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" 
                src="js/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>                
                
        <style type="text/css">
            /* Customize the css on the generated research results divs to show
               an orange rounded border. Bold the label in second css rule.
            */
            #output div {
                border: 2px solid orange;
                width: 600px;
                border-radius: 10px;
                margin-top: 10px;
            }
            
            #output div > p > span {
                font-weight : bold;
            }
        </style>
                
        <script type="text/javascript">
            // array of JSON objects
            var itemList = [];
             
            $(function() {
                // disable the input until data is loaded
                $('#target').attr("disabled", "disabled");
                
                $("#loadButton").click(function() {
                    var result = [];
                    // filter the data for matching entries
                    result = $.grep(itemList,
                        function(value, index) {
                            return (value.label.toLowerCase().indexOf(
                                $('#target').val().toLowerCase()) === 0);
                        });
                     $("#output").empty();
                     
                     // format each result as its own div with name, cals, size
                     for (var i = 0; i < result.length; i++) {
                        $("#output").append("<div><p><span>Name: </span>" + result[i].data.name + "</p> <p><span>Cals: </span>" + result[i].data.cals + "</p> <p><span>Size: </span>" + result[i].data.size + "</p></div>");
                    }
                });
                
                // similar to the example from class, cycle thru the output 
                $("#cycleButton").click(function() {
                    $('#output').cycle({
                        fx : 'shuffle',
                        shuffle : {
                            top : -230,
                            left : 230
                        },
                        speed : 300,
                        timeout : 1000
                    });
                });

                // make the ajax request, note the url and data values to
                // read the xml file from a different domain.
                $.ajax({
                    url : "cgi-bin/getData.php",
                    data : {url : "http://kalathur.com/food/calories2.xml"},
                    complete : function(xhr, result) {
                        if (result !== "success")
                            return;
                        var response = xhr.responseXML;
                        // for each <item> element
                        $(response).find("item").each (function() {
                            var name = $(this).find("name").text();
                            var size = $(this).find("size").text();
                            var cals = $(this).find("cals").text();
                            var item = 
                                {label : name, 
                                 value : name,
                                 data : {name : name, size : size, 
                                        cals : cals}};
                           itemList.push(item); 
                        });
                    }
                });
                // enable the input
                $('#target').removeAttr("disabled");
            });
            

        </script>
    </head>
    
    <body>
        <h2>JQuery Nutrition Cycle</h2>
        <div class="ui-widget">
            <label for="target">Tag: </label>
            <input id="target" size="60"/>
            <input type="button" id="loadButton" title="load" value="load">
            <input type="button" id="cycleButton" title="cycle" value="cycle">
            <p></p>

        </div>
        <div id="output">
            
        </div>
    </body>
</html>
